<template>
   <div class="msg-box">
        <div class="title">基本信息</div>
        {{ currentId }}
        <div class="msg-form"> 
            <UserUpdate :userId="currentId"></UserUpdate>
        </div>
   </div>
</template>
<script>
import UserUpdate from '@/components/UserUpdate.vue';
export default {
  data(){
    return {
       currentId:this.$store.state.userInfo._id
    }
  },
    components:{
        UserUpdate
    }

}
</script>

<style lang="scss" scoped>
.msg-form {
    width: 500px;
    margin:50px;
}
// 使用了scoped样式隔离后， ::v-deep才会有效
::v-deep {
    
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}

</style>